<template>
  <div class="payfor">
    <!-- 给爷买 -->
    <div class="headerbox">
      <div class="header-walp">
        <div class="header">订单详情</div>
        <van-icon @click="ret" name="arrow-left" />
      </div>
    </div>
    <div class="center">
      <div class="address">
        <p class="txt">
          <van-icon name="map-marked" />&nbsp;&nbsp;&nbsp;&nbsp;<span
            >收货地址 :</span
          >
        </p>
        <div class="right" @click="changeaddress">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="location" v-for="item in this.addresslist" :key="item.id">
        <div class="left">
          <van-icon name="map-marked" />
        </div>
        <div class="center-box">
          <div class="p1">
            <div class="name">{{ item.name }}</div>
            <div class="tel">{{ item.tel }}</div>
          </div>
          <div class="p2">
            <div class="dizhi">
              {{ item.city }}{{ item.county }}{{ item.addressDetail }}
            </div>
          </div>
        </div>
        <div class="right" @click="changeaddress">
          <van-icon name="arrow" />
        </div>
      </div>

      <div class="isbuy">
        <div class="address">
          <p class="txt">
            <van-icon name="lock" />&nbsp;&nbsp;&nbsp;&nbsp;<span
              >购买商品 :</span
            >
          </p>
        </div>
      </div>
      <div class="content">
        <div class="item" v-for="item in userbuy" :key="item.id">
          <div class="item-center">
            <div class="left">
              <img :src="item.src" alt="" />
            </div>
            <div class="right">
              <div class="msg">
                <div class="van-multi-ellipsis--l2">
                  {{ item.goodmsg }}
                </div>
              </div>
              <div class="canshu">单价:￥{{ item.goodprice }}</div>
            </div>
          </div>
          <div class="item-bottom">
            <div class="left"></div>
            <div class="right">
              <div class="price">
                ￥{{ (item.goodprice * item.buynum).toFixed(2) }}
              </div>
              <div class="changenum">
                <span class="num"><span>x </span> &emsp;{{ item.buynum }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <p class="footer">
        <span class="p1">共{{ totalnum }}件,</span>
        <span>合计: </span> &emsp;
        <span class="bottom-price" style="color: red"> ￥{{ totalprice }}</span>
      </p>

      <div @click="showPopup" class="content btn">提交订单</div>

      <van-action-sheet v-model="show" title="扫码支付">
        <div class="content">
          <div class="checkPay">
            <div
              @click="changeSelected(item.id)"
              :class="{ selected: item.id == active }"
              v-for="item in paylist"
              :key="item.id"
            >
              {{ item.pay }}
            </div>
          </div>

          <div class="imgbox" @click="ispay">
            <img
              v-if="true"
              src="https://img-blog.csdnimg.cn/20210128213030980.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjIzMDA3,size_16,color_FFFFFF,t_70#pic_center"
              alt=""
            />

            <img
              v-else
              src="https://img-blog.csdnimg.cn/20210128213031449.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjIzMDA3,size_16,color_FFFFFF,t_70#pic_center"
              alt=""
            />
          </div>
        </div>
      </van-action-sheet>
      <van-dialog @closed="payok" v-model="show2" show-cancel-button>
        <div class="payok">您已经支付,即将跳转订单详情页面!</div>
      </van-dialog>
      <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell> -->
    </div>
    <!--  -->
  </div>
</template>

<script>
import { Toast } from "vant";
import areaList from "../assets/area";
import addressModel from "../model/addressModel";
import shoppingcartModel from "../model/shoppingcartModel";

export default {
  data() {
    return {
      show: false,
      show2: false,
      areaList,
      searchResult: [],
      addresslist: [],
      userbuy: [],
      active: 1,
      paylist: [
        { id: 1, pay: "支付宝" },
        { id: 2, pay: "微信" },
      ],
    };
  },
  created() {
    this.$store.commit("changeNavFlag", false);
    addressModel.query({ isDefault: true }).then((res) => {
      // console.log(res.data);
      this.addresslist = res.data;
      console.log(this.addresslist);
    });
    shoppingcartModel
      .query({
        username: localStorage.getItem("username"),
        isbuy: true,
      })
      .then((res) => {
        // console.log(res.data);
        this.userbuy = res.data;
        console.log(1111, this.userbuy);
      });
  },
  computed: {
    totalnum() {
      //选中 的数据中  goodsnum
      let num = 0;
      this.userbuy.forEach((item) => {
        num += item.buynum * 1;
        // console.log(item.gobuynumodnum);
      });
      return num;
    },
    totalprice() {
      let price = 0;
      this.userbuy.forEach((item) => {
        price += item.buynum * item.goodprice;
      });
      return price.toFixed(2);
    },
  },

  methods: {
    changeSelected(item) {
      this.active = item;
    },
    changeaddress() {
      this.$router.history.push("/order");
    },

    ispay() {
      this.show2 = !this.show2;
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        // duration: 3, // 持续展示 toast
      });
    },

    onDelete() {
      Toast("delete");
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: "武汉",
            address: "江夏区金融港路",
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
    showPopup() {
      this.show = !this.show;
    },
    payok() {
      // console.log(111, this.userbuy);
      this.userbuy.forEach((item) => {
        shoppingcartModel.del(item.id);
      });

      this.$router.history.push("mine");
    },
    ret() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
// 头部
$main: #c0aa95;
.payfor {
  //   background-color: #eae9e5;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}
.headerbox {
  //   height: auto;
  overflow: hidden;
  height: 40px;
  width: 100%;
  .header-walp {
    position: fixed;
    width: 100%;
  }
  .header {
    line-height: 40px;
    font-size: 20px;
    text-align: center;
    padding-top: 10px;
    background-color: #eae9e5;
  }
  .iconfont {
    margin-top: 5px;
  }
}
//
.van-icon-arrow-left {
  font-size: 20px;
  font-weight: 700;
  color: $main;
  position: fixed;
  left: 15px;
  top: 18px;
  box-sizing: content-box;
}
.address {
  padding: 10px 20px;
  position: relative;
  .right {
    position: absolute;
    right: 25px;
    top: 20px;
    font-size: 18px;
  }
  .txt {
    border-bottom: 1px solid #999999;
    line-height: 40px;
    margin-bottom: 10px;
    margin-top: 0px;
    font-size: 14px;
  }
}
.center {
  margin-top: 50px;
  flex: 1;
  .location {
    background-color: #fff;
    border-radius: 16px;
    padding: 10px;
    //   font-size: 16px;
    width: 90%;
    margin: auto;
    box-shadow: 0px 2px 10px rgba(51, 51, 51, 0.35);
    display: flex;
    align-items: center;
    .center-box {
      padding: 0 20px;
      .p1 {
        display: flex;
        margin-bottom: 5px;
        .name {
          font-size: 18px;
          line-height: 32px;
        }
        .tel {
          margin-left: 20px;
          font-size: 12px;
          line-height: 32px;
          color: gray;
        }
      }
      .p2 {
        margin-bottom: 10p;
      }
    }
    .right {
      font-size: 20px;
      color: $main;
    }
    .left {
      text-align: center;
      width: 20%;
      .van-icon-map-marked {
        font-size: 30px;
        color: $main;
        //   margin-top: 40%;
      }
    }
  }
}

.bottom {
  // padding-top: ;
  height: 60px;
  background-color: #eae9e5;
  position: relative;
  .footer {
    .bottom-price {
      font-size: 18px;
    }
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
    line-height: 40px;
  }
  .btn {
    margin-top: 7px;
    position: absolute;
    z-index: 999;
    right: 30px;
    top: 8px;
    border: 1px solid $main;
    padding: 5px;
    background-color: $main;
    color: white;
    border-radius: 99px;
  }
}

.content {
  //   margin-top: -92px;
  //   margin-bottom: 60px;
  .item {
    background-color: #fff;
    width: 90%;
    // height: 192px;
    box-shadow: 0px 2px 10px rgba(51, 51, 51, 0.35);
    margin: auto;
    border-radius: 16px;
    padding: 10px 10px;
    margin-bottom: 20px;
    .item-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .delete {
        color: tomato;
        padding: 4px;
        border-radius: 4px;
        border: 1px solid tomato;
      }
    }
    .item-center {
      height: 100px;
      // background-color: $main;
      display: flex;
      justify-content: space-around;
      .left {
        width: 100px;
        height: 100%;
        overflow: hidden;
        border-radius: 8px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        font-size: 14px;
        width: 170px;
        .msg {
          height: 40px;
        }
        .canshu {
          margin-top: 5px;
          padding-left: 5px;
          height: 50px;
          background-color: rgba(248, 248, 248, 1);
          color: #999999;
          text-align: left;
          line-height: 50px;
        }
      }
    }
    .item-bottom {
      justify-content: space-around;
      display: flex;
      .left {
        width: 100px;
      }
      .right {
        width: 180px;
        line-height: 32px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        .price {
          color: red;
        }
        .changenum {
          font-size: 14px;
          .reduce,
          .add,
          .num {
            display: inline-block;
            height: 20px;
            // border: 1px solid #999999;
            line-height: 20px;
            width: 20px;
            text-align: center;
          }
          .num {
            width: 35px;
          }
          .reduce {
            margin-right: -1px;
          }
          .add {
            margin-left: -1px;
          }
        }
      }
    }
  }
}
.van-action-sheet__content {
  .content {
    .checkPay {
      display: flex;
      line-height: 36px;
      justify-content: center;
      div {
        width: 40%;
        text-align: center;
      }
      .selected {
        background-color: $main;
      }
    }
    .imgbox {
      margin: auto;
      text-align: center;
      img {
        width: 80%;
        height: 80%;
      }
    }
  }
}
.payok {
  line-height: 140px;
  font-size: 20;
  text-align: center;
}
</style>